import React, { useEffect, useState } from 'react';

//React实现一个发送验证码功能
const Case1: React.FC = () => {
  let COUNT = 60;
  const [count, setCount] = useState(0);

  //点击发送验证码把count的值设为60
  const startCode = () => {
    if (count !== 0) return;
    setCount(COUNT);
  };
  //开启倒计时
  useEffect(() => {
    const timer = setTimeout(() => {
      if (count === 0) return;
      setCount(count - 1);
    }, 1000);
    return () => {
      clearTimeout(timer);
    };
  }, [count]);

  return (
    <>
      <div onClick={startCode}>{count === 0 ? '发送验证码' : `${count}`}</div>
    </>
  );
};

export default Case1;
